<template>
  <el-form
    ref="departmentForm"
    label-position="right"
    :rules="rules"
    :model="data"
    label-width="100px"
  >
    <el-row>
      <el-col :span="18">
        <el-form-item label="部门名称" prop="deptname">
          <el-input v-model="data.deptname" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="11">
        <el-form-item label="所属公司" prop="cpname">
          <el-input v-model="data.cpname" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="11" :offset="1">
        <el-form-item label="上级部门" prop="pdeptname">
          <el-input
            v-model="data.pdeptname"
            placeholder="无上级部门"
            disabled
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="11">
        <el-form-item label="部门联系人" prop="contactor">
          <el-input v-model="data.contactor" autosize />
        </el-form-item>
      </el-col>
      <el-col :span="11" :offset="1">
        <el-form-item label="联系方式" prop="contactway">
          <el-input v-model="data.contactway" autosize />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="11">
        <el-form-item label="备注" prop="remark">
          <el-input v-model="data.remark" type="textarea" autosize />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { defineComponent, getCurrentInstance } from "@vue/composition-api";

export default defineComponent({
  props: {
    // 表单
    data: {
      type: Object,
      required: true,
    },
  },

  setup(_, ctx) {
    const that = getCurrentInstance();

    function submit() {
      that.refs["departmentForm"].validate((valid) => {
        if (valid) {
          ctx.emit("submit");
        }
      });
    }

    return {
      // 新增表单规则
      rules: {
        deptname: [
          { required: true, message: "部门名称不能为空", trigger: "blur" },
        ],
        contactor: [
          { required: true, message: "部门联系人不能为空", trigger: "blur" },
        ],
        contactway: [
          { required: true, message: "联系方式不能为空", trigger: "blur" },
        ],
      },

      submit,
    };
  },
});
</script>
